<template>
  <div class="search-container">
    <div class="search-input">
      <input type="text" placeholder="搜索食谱">
      <i class="iconfont icon-sousuo fangfajing"></i>
    </div>
    <ul class="shiliao-category clearfix">
      <li v-for="(ele,index) in dietList" :key="index">
        <p :class="['category-icon','category-icon-'+index]">
          <i :class="['iconfont',ele.icon]"></i>
        </p>
        <p>{{ele.text}}</p>
       
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Search',
    data () {
      return {
        dietList: [
          {
            icon: 'icon-qiqiu',
            text: '美容养颜'
          },
          {
            icon: 'icon-huazhuangpin-xiangshuijinghua',
            text: '保健调养'
          },
          {
            icon: 'icon-putao',
            text: '补养'
          },
          {
            icon: 'icon-qiqiu',
            text: '减肥'
          },
          {
            icon: 'icon-yingerche',
            text: '母婴'
          },
          {
            icon: 'icon-shuye',
            text: '气节'
          },
          {
            icon: 'icon-chazishaozi-',
            text: '常见食疗'
          },
          {
            icon: 'icon-renqun',
            text: '人群功效'
          },
          {
            icon: 'icon-qiqiu',
            text: '维生素'
          },
          {
            icon: 'icon-qiqiu',
            text: '其他'
          }
        ]
      }
    }
  }
</script>

<style scoped>
.search-container{
  padding: 0.15rem 0.25rem 0;
  background-color: #fff;
}
.search-input{
  padding-bottom: 0.15rem;
  position: relative;
}
.search-input input{
  width: 100%;
  height: 0.56rem;
  background-color: #f1f1f1;
  border-radius: 0.1rem;
  font-size: 0.3rem;
  padding-left: 0.1rem;
}
.fangfajing{
  position: absolute;
  top: 0.02rem;
  right: 0;
  font-size: 0.4rem;
}
/*食疗分类*/
.shiliao-category>li{
  float: left;
  width: 1.4rem;
  text-align: center;
  margin-bottom: 0.2rem;
  font-size: 0.24rem;
  color: #333;
}
.category-icon{
  width: 0.75rem;
  height: 0.75rem;
  line-height: 0.75rem;
  margin: 0 auto 0.08rem;
  border-radius: 50%;
}
.category-icon i{
  font-size: 0.7rem;
  color: #fff;
}
.category-icon-0{
  background-color: #FFAD94;
}
.category-icon-1{
  background-color: #46EBB7;
}
.category-icon-2{
  background-color: #61E67D;
}
.category-icon-3{
  background-color: #EE6060;
}
.category-icon-4{
  background-color: #FE7E95;
}
.category-icon-5{
  background-color: #00CCCB;
}
.category-icon-6{
  background-color: #FFBE43;
}
.category-icon-7{
  background-color: #409EE1;
}
.category-icon-8{
  background-color: #FFAF1C;
}
.category-icon-9{
  background-color: #CAD9D6;
}


</style>